<template>
	<view>
		<view class="orderNo">
			订单号:{{orderNo}}
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="refundWrapper">
				<view class="refundItem" v-for="(item,index) in list" :key="index">
					<text>扣款原因:{{item.deductionsFor|filterNull}}</text>
					<text>扣款费用:¥{{item.deductionsAmount|filterNull}}</text>
					<view class="" v-if="item.carDamageUrl != null">
						<text>车损照片</text>
						<u-album :urls="item.carDamageUrlList"></u-album>
					</view>
					<view class="" v-if="item.documentsUrl != null">
						<text>单据凭证照片</text>
						<u-album :urls="item.documentsUrlList"></u-album>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		apiOrderDepositRefundInfo
	} from '@/api/longOrder-api.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import settings from '@/settings.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				orderNo: '',
				list: []
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
		},
		methods: {
			upCallback() {
				apiOrderDepositRefundInfo({
					settlementType: 1,
					orderNo: this.orderNo
				}).then(res => {
					this.mescroll.endSuccess(res.data.length);
					this.list = res.data;
					this.list.forEach((item) => {
						//车损照片处理
						if (item.carDamageUrl != null) {
							var carDamageUrlPaths = item.carDamageUrl.split(",");
							for (let path of carDamageUrlPaths) {
								path = settings.baseImageUrl + path;
							}
							item.carDamageUrlList = carDamageUrlPaths;
						}
						//单据凭证照片处理
						if (item.documentsUrl != null) {
							var documentsUrlPaths = item.documentsUrl.split(",");
							for (let path of documentsUrlPaths) {
								path = settings.baseImageUrl + path;
							}
							item.documentsUrlList = documentsUrlPaths;
						}
					})
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderNo {
		padding: 20upx;
		color: $text-color-33;
		font-size: 26upx;
		font-weight: bold;
	}

	.refundWrapper {
		margin: 10upx 20upx;

		.refundItem {
			padding: 20upx;
			margin-bottom: 20upx;
			background-color: $bg-white-color;
			border-radius: 16upx;

			text {
				display: block;
				color: $text-color-33;
				font-size: 26upx;
			}
		}
	}
</style>
